<template>
    <up-empty 
        :mode="mode" 
        :icon="imgUrl"
        :text="text"
        :width="width"
        :height="height"
        >
        <up-button
                :custom-style="customStyle"
				v-if="isShowBtn"
				:text="btnText"
                @click="handleClick"
			>
			</up-button>
    </up-empty>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const baseUrl = 'http://cdn.uviewui.com/uview/empty/';
const customStyle = ref({
    marginTop: "20rpx",
    backgroundColor: "#dd524d",
    color: "#FFFFFF"
})
const imgUrl = computed<string>(() => {
    return baseUrl+props.mode+'.png';
})

interface PropsType {
    text: string,
    show: boolean,
    isShowBtn: boolean,
    textColor: string,
    textSize: string | number,
    iconColor: string,
    iconSize: string | number,
    mode: string,
    width: string,
    height: string,
    marginTop: string,
    btnText: string,
}
const props = withDefaults(defineProps<PropsType>(), {
    text: "", // 文字提示
    textColor: "#c0c4cc", // 文字颜色
    textSize: "14", // 文字大小
    iconColor: "#c0c4cc", // 图标的颜色
    iconSize: "90", // 图标的大小
    mode: "data",
    width: "160", // 图标的宽度，单位px
    height: "160", // 图标的高度，单位px
    show: true, 
    marginTop: "0", // 组件到上一个元素的间距,单位px
    isShowBtn: false, // 是否显示按钮
    btnText: "", // 按钮 文字
})

interface EmitType {
    (e: "handleClick"): void;
};
const emit = defineEmits<EmitType>();

const handleClick = () => {
    emit('handleClick');
}

defineExpose ({
    handleClick
})
</script>

<style lang="scss" scoped>
.custom-style{
    margin-top: 20rpx;
}
</style>